<script setup>
import { ref, nextTick } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

const dialogVisible = ref(false);

const previewFile = ref(null);
const showFile =() => {
  console.log('showFile', previewFile?.value)
  nextTick(() => {
    const urls = [
      "http://dev-product-gushen.shunde.sieiot.com/downloads/dev-product/file/updata/0d7539de01f146e1a09649e1b4ada945.xlsx",
      "http://dev-product-gushen.shunde.sieiot.com/downloads/dev-product/file/updata/3d64c9d316284232a55e9fb2e8f60146.pdf",
      "http://dev-product-gushen.shunde.sieiot.com/downloads/dev-product/file/updata/ac55228ead454aab87b8b93bb97110a4.txt",
      'http://dev-product-gushen.shunde.sieiot.com/downloads/dev-product/file/updata/af44bf297e9841e89d0fb536483f8cb8.png',
    ];
    previewFile.value.show(urls[0])
  })
  
}
</script>

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
    <el-button type="primary" @click="dialogVisible = true">showDialog</el-button>
  </div>
  <HelloWorld msg="Vite + Vue" />
  <kk-button size="small" type="primary" @click="showFile">我的按钮</kk-button>
  <kk-dialog ref="ttDialog" v-model="dialogVisible"></kk-dialog>
  <kk-previewFile ref="previewFile"></kk-previewFile>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
